<template>
    <user-statistic :dataObj="userOrderList"></user-statistic>
    <div class="padding-top-26">
        <custom-form :list="formList" :gutter="10" @clickFun="clickButton">
        </custom-form>
    </div>
    <div class="padding-top-14">
        <el-table :data="orderInfoList" :header-cell-style="tableHeader" border  style="width: 100%" >
            <el-table-column type="index" label="序号" width='88' align="center"></el-table-column>
            <el-table-column header-align="center" v-for="item in columns" :key="item.title" :label="item.title" :filters="item.filters" :filterMethod="item.filterMethod"></el-table-column>
            <el-table-column header-align="center" label="操作">
                <template #default="scope">
                    <el-link type="primary" :underline="false">退租金</el-link>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="padding-top-14">
        <el-pagination 
            v-model:current-page="postData.page"
            :total="totalNum"
            v-model:page-size="postData.size"
            :pager-count="7"
            :page-sizes="[3,6,10]"
            layout="->, total, prev, pager, next,sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background></el-pagination>
    </div>
</template>
<script setup lang="ts">
import userStatistic from "@/views/users/components/userStaistic/index.vue";
import { useRoute } from 'vue-router';
import customForm from '@/views/users/components/customForm/index.vue';
import type {CusForm,Column} from '@/utils/users/pubConfig';
import {getUserOrderOverview} from '@/config/paths';
import {tableHeader} from '@/utils/users/pubConfig';
const route = useRoute();
interface PostData{
    page:number,
    size:number
}
const totalNum=ref<number>(0)
// const props=defineProps<{list:{title:string,value:number,span:number}[]}>()
const postData =ref<PostData>({
    page:1,
    size:3
})
const countInfo=ref<{change_battery_count:number,
    gift_price:number,
    leave_days:number,
    pay_count:number,
    pay_price:number,
    total_battery_usage:number,
    used_days:number
    }>({
        change_battery_count:0,
        gift_price:0,
        leave_days:0,
        pay_count:0,
        pay_price:0,
        total_battery_usage:0,
        used_days:0
    })
const userId=ref<string>('')
const columns=ref<Column[]>([
    {key:'',
    title:'租赁订单',
    dataKey:'',},
    {key:'',
    title:'支付单号',
    dataKey:'',},
    {key:'',
    title:'单个套餐金额',
    dataKey:'',},
    {key:'',
    title:'套餐购买数量',
    dataKey:'',},
    {key:'',
    title:'租赁总金额',
    dataKey:'',},
    {key:'',
    title:'已退押金',
    dataKey:'',},
    {key:'',
    title:'押金',
    dataKey:'',},
    {key:'',
    title:'订单状态',
    dataKey:'',},
    {key:'',
    title:'代扣',
    dataKey:'',},
    {key:'over',
    title:'逾期',
    filters:[{text:'逾期',value:'a'},{text:'正常',value:'v'}],
    filterMethod:()=>{ filterTag()},
    dataKey:'',},
    {key:'',
    title:'区域',
    dataKey:'',},
    {key:'',
    title:'支付时间',
    dataKey:'',}
],)
const orderInfoList=ref<string[]>([''])
const formList=ref<CusForm[]>([
    {title:'订单日期',sm:10,md:10,lg:10,xl:10,showDatePicker:true,date:'',value:'register_time',datePickerStyle:'width:300px'},
    {title:'订单状态',sm:10,md:10,lg:10,xl:10,showSelect:true,selected:'',value:'user_type',selectStyle:'width:50%',selectList:[{label:'个人',value:'个人'},{label:'企业',value:'企业'}]},
    {title:'',sm:4,md:4,lg:4,xl:4},
    {title:'提交日期',sm:10,md:10,lg:10,xl:10,showSingleDatePicker:true,singleDate:'',value:'',singleDatePickerStyle:'width:320px'},
    {title:'支付单号',sm:10,md:10,lg:10,xl:10,showInput:true,value:'',inputName:'',inputPlaceholder:'请输入支付单号',style:'width:50%'},
    {title:'',sm:4,md:4,lg:4,xl:4,showButton:true,colStyle:'text-align:right',buttonList:[{buttonTitle:'确认',icon:'Search',type:'primary',plain:false},{buttonTitle:'重置',type:'info',icon:'RefreshRight',plain:true}]}
])
onMounted(()=>{
    const {user_id}=route.query
    userId.value=user_id
    getOrdersInfo()
})
async function getOrdersInfo() {
    const {data}=await baseRequest.post(getUserOrderOverview.value,{user_id:userId.value})
   countInfo.value=data
}
const keyName={
    'gift_price':'优惠金额',
    'leave_days':'剩余天数',
    'pay_count':'累计购买',
    'pay_price':'支付金额',
    'total_battery_usage':'累计使用电量',
    'used_days':'使用天数',
    'change_battery_count':'累计换电次数'
}
const userOrderList=computed(()=>{
    let newList:any=[]
      for(let [key,value] of Object.entries(countInfo.value)){
         if(isNaN(value)) continue
         newList.push({title:keyName[key],value,span:3})
      }
      newList.sort((first,second)=>{
         if(first.title>second.title){
               return 1
         }
         if(first.title<second.title){
               return -1
         }
         return 0
      }) 
      console.log('newList',newList)
      return [newList[6],newList[1],newList[2],newList[3],newList[0],newList[4],newList[5]]
})
function clickButton(value){
    console.log('ok',value)
    if(value=='重置'){
        location.reload()
        return
    }
    confirm()
    return
}
function confirm(){
    console.log('confirm')
    formList.value.forEach(item=>{
        console.log('item',item)
    })
}
async function handleSizeChange(val:number){
    postData.value.size=val
    postData.value.page=1
   
}
async function handleCurrentChange(val:number) {
    postData.value.page=val
  
}
const filterTag = (value: string, row: any) => {
    console.log('value',value,row)
  return row.over === value
}

</script>